<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      class="zhuangtailan"
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>

    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#eeeeee"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">行者中心</view>
      <view class="head_right" @click="goPage"> 推荐有礼 </view>
    </view>
    <view class="box">
      <view class="box_head">
        <view class="head_left1">
          <image :src="user.avatar_url" mode=""></image>
        </view>
        <view class="head_center1">
          <view class="center1_t">
            {{ user.nick_name }}
          </view>
          <view
            class="center1_b"
            v-if="user.grade"
            style="display: flex; align-items: center; margin-bottom: 10rpx"
            @click="is_show = !is_show"
          >
            您已开通{{ user.grade.level_name
            }}<u-icon
              :name="is_show ? 'arrow-up' : 'arrow-down'"
              color="#888888"
              size="16"
            ></u-icon>
          </view>
          <template v-if="is_show">
            <view class="center1_b" v-for="(item, index) in day_list">
              您{{ item.level_name }}剩余{{ item.surplus_days }}天
            </view>
          </template>
        </view>
        <!-- <view class="head_right1" @click="toDetail">
          成长记录
          <u-icon
            name="arrow-right"
            color="#ADADAD"
            style="margin-left: 6rpx"
          ></u-icon>
        </view> -->
      </view>
      <view class="box_ranking box_ranking1" @click="toTheCharts">
        <view class="ranking_t"> 看看你的朋友都排在哪？ </view>
        <view class="ranking_b"> 查看排行榜排名 </view>
      </view>
      <view class="box_ranking box_ranking2" @click="toDetail">
        <view class="ranking_t"> 成长记录 </view>
        <view class="ranking_b"> 查看成长记录 </view>
      </view>
      <view class="box_ranking box_ranking3" @click="goYitian(4)">
        <view class="ranking_t"> 行者故事 </view>
        <view class="ranking_b"> 查看行者故事 </view>
      </view>
      <view class="box_ranking box_ranking4" @click="goYitian(5)">
        <view class="ranking_t"> 研学感悟 </view>
        <view class="ranking_b"> 查看研学感悟 </view>
      </view>

      <!-- <view class="box_card">
        <view class="box_card_item box_card_item1" @click="toDetail">成长记录</view>
        <view class="box_card_item box_card_item2" @click="goYitian(4)">行者故事</view>
        <view class="box_card_item box_card_item3" @click="goYitian(5)">研学感悟</view>
      </view> -->
    </view>

    <view class="member_level">
      <u-tabs
        class="tabs"
        :list="list"
        @click="click"
        :activeStyle="{
          color: '#eee',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
          'font-size': '30rpx',
          paddingLeft: '16rpx',
          paddingRight: '16rpx',
        }"
        lineColor="#eeeeee"
        :inactiveStyle="{
          color: '#888888',
          transform: 'scale(1)',
          'font-size': '30rpx',
          paddingLeft: '16rpx',
          paddingRight: '16rpx',
        }"
        lineWidth="72rpx"
        lineHeight="4rpx"
        keyName="level_name"
      ></u-tabs>

      <view class="handle_time">
        <view
          v-for="(item, index) in handleList"
          class="handle_item"
          :class="
            currentIndex1 == index
              ? `level_action_${currentIndex} level_${currentIndex}`
              : `level_${currentIndex}`
          "
          @click="handleClick(item, index)"
        >
          <view class="handle_t">
            {{ item.name }}
          </view>
          <view class="handle_b"> ￥{{ item.price }} </view>
        </view>
      </view>
      <view class="handle_text">
        *开通则表示您同意
        <text
          :style="{
            color: bgColor,
          }"
          >《行者服务协议》</text
        >

        ；关于会员更多疑问,请见
        <text
          :style="{
            color: bgColor,
          }"
          >《常见问题》</text
        >
        或联系华胥星球官方客服 (华胥星球) 解决您的疑问。
      </view>
      <view class="privilege">
        <view class="privilege_title"> 开通会员立享更多特权 </view>
        <view class="privilege_view">
          <view class="privilege_item" v-for="(item, index) in tequanList">
            <view class="view_t">
              <!-- `../../static/images/icon_xzzx_tequan_${currentIndex}.png` -->
              <image :src="item.file_url" mode=""></image>
            </view>
            <view class="view_b">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view class="illustrate">
        <view class="illustrate_title">
          <!-- 元气驿站 -->{{ level_name }}行者说明
        </view>
        <view class="illustrate_text" v-html="illustrate_item">
          <!-- {{  }} -->
        </view>
      </view>
      <view class="program">
        <view class="program_title"> 山海导航 </view>
        <view class="program_text">
          华胥星球线上部分音视频课程免费畅享，持续更新中。
        </view>
        <view class="program_view">
          <view
            class="program_item"
            v-for="(item, index) in jiemuList"
            @click="goDaohang(item)"
          >
            <view class="item_t">
              <image :src="item.img_arr[0]" mode=""></image>
            </view>
            <view class="item_b">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>

      <view class="program">
        <view class="program_title"> 行者专区内容 </view>
        <view class="program_view">
          <view
            class="program_item"
            v-for="(item, index) in xingzheList"
            @click="toDetail1(item)"
          >
            <view class="item_t">
              <image :src="item.file_url" mode=""></image>
            </view>
            <view class="item_b">
              {{ item.name }}
            </view>
          </view>
          
        </view>
      </view>
    </view>
    <view class="" style="width: 100%; height: 176rpx; background: #272727">
    </view>
    <view class="btn_footer">
      <view
        class="btn"
        :style="{
          background: bgColor,
        }"
        @click="handOpen()"
      >
        开通畅享多项权益 开启行者之旅
      </view>
    </view>

    <u-popup :show="show" @close="close" @open="open">
      <view class="payment">
        <view class="payment_head">
          支付
          <view class="payment_colse" @click="close">
            <u-icon name="close" color="#eee" size="22"></u-icon>
          </view>
        </view>
        <view class="payment_block">
          <view class="block_left">
            <image
              :src="`../../static/images/pic_xzzx_xzk_${currentIndex}.png`"
              mode=""
            ></image>
          </view>
          <view class="block_right">
            <view class="block_t">
              {{ level_name }}行者卡{{ selectItem.name }}
            </view>
            <view class="block_c"> 一起探索大好山河 </view>
            <view class="block_b"> ￥{{ selectItem.price }} </view>
          </view>
        </view>
        <!-- <view class="paymentMethod">
					<view class="method">
						<view class="method_item" @click="wayClick('wx')">
							<view class="method_left">
								<image src="@/static/images/icon_huiyuanzhongxin_weixizhifu.png" mode=""></image>
							</view>
							<view class="method_center">
								微信支付
							</view>
							<view class="method_right">
								<image src="@/static/images/icon_huiyuanzhongxin_xuanzhong.png" mode=""
									v-if="way == 'wx'"></image>
								<image src="@/static/images/icon_huiyuanzhongxin_weixuanzhong.png" mode="" v-else>
								</image>
							</view>
						</view>
						<view class="method_item" style="margin-top: 40rpx;" @click="wayClick('zfb')">
							<view class="method_left">
								<image src="@/static/images/icon_huiyuanzhongxin_zhifubso.png" mode=""></image>
							</view>
							<view class="method_center">
								支付宝
							</view>
							<view class="method_right">
								<image src="@/static/images/icon_huiyuanzhongxin_xuanzhong.png" mode=""
									v-if="way == 'zfb'"></image>
								<image src="@/static/images/icon_huiyuanzhongxin_weixuanzhong.png" mode="" v-else>
								</image>
							</view>
						</view>
					</view>
				</view> -->
        <view class="payment_illustrate">
          <view class="illustrate_box">
            <view class="illustrate_title"> 购买说明 </view>
            <view class="illustrate_text1" v-html="buy_explain">
              <!-- <view>
                1.元气驿站会员有效期为1年，有效期内可享受全站节目畅享权益;
              </view>
              <view>
                2.如开通前已是元气驿站会员，则购买成功后在原权益基础上累计时长;
              </view>
              <view> 3.行者服务为虚拟商品，购买成功后不支持退换、转让; </view>
              <view>
                4.如问题请通过华胥星球App-我的-我的服务-客服中心查看解决方案/给我们反馈。
              </view> -->
            </view>
          </view>
        </view>
        <view
          class="payment_btn"
          :style="{
            background: bgColor,
          }"
          @click="purchase"
        >
          立即购买
        </view>
      </view>
    </u-popup>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import { getList, get_vip_days } from "@/common/api/xingzhe.js";
import { appversionAgreement } from "@/common/http.js";
export default {
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      currentIndex: 0,
      currentIndex1: 0,
      handleList: [
        {
          time: "一月",
          price: "25",
        },
        {
          time: "一年",
          price: "55",
        },
        {
          time: "三年",
          price: "135",
        },
        {
          time: "五年",
          price: "225",
        },
      ],
      bgColor: "#55B877",
      list1: [
        {
          name: "元气驿站",
          bgColor: "#55B877",
        },
        {
          name: "启初梦谷",
          bgColor: "#FABC81",
        },
        {
          name: "青空天台",
          bgColor: "#CFA5E3",
        },
        {
          name: "无极云顶",
          bgColor: "#7EC6FF",
        },
        {
          name: "返朴归源",
          bgColor: "#6C87D0",
        },
      ],
      show: false,
      way: "wx",
      user: {},
      list: [],
      tequanList: [],
      illustrate: "",
      jiemuList: [],
      xingzheList: [],
      selectItem: {},
      level_name: "",
      level_id: 0,
      day_list: [],
      is_show: false,
      illustrate_item: "",
      buy_explain:""
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
          // this.windowHeihgt = statusBarHeight.windowHeight - data.height - this.statusBarHeight;
        })
        .exec();
    });
  },
  onLoad() {
    this.getList();
    this.getXieyi();
    this.getDays();
  },
  methods: {
    getDays() {
      get_vip_days({}).then((res) => {
        console.log("resssssss155555", res);
        this.day_list = res.data.list;
      });
    },
    getXieyi() {
      appversionAgreement({}).then((res) => {
        console.log("resss123", res);
        this.illustrate = res.data.xingzhe.content;
      });
    },
    getList() {
      getList({}).then((res) => {
        console.log("五个等级列表", res);
        this.user = res.data.userInfo;
        this.list = res.data.list;
        this.handleList = res.data.list[0].select_buy;
        this.tequanList = res.data.list[0].tequan;
        this.selectItem = res.data.list[0].select_buy[0];
        this.level_name = res.data.list[0].level_name;
        this.jiemuList = res.data.list[0].jiemu;
        this.xingzheList = res.data.list[0].neirong;
        this.buy_explain = res.data.list[0].buy_explain
        this.level_id = res.data.list[0].level_id;
        this.illustrate_item = res.data.list[0].illustrate;
        
      });
    },
    handOpen() {
      this.show = true;
    },
    toDetail1(item) {
      uni.navigateTo({
        url: `/pages/training/detail?id=${item.id}&type=${item.type}`,
      });
    },
    goDaohang(item) {
      uni.navigateTo({
        url: `/pages/stargate/maps?id=${item.id}`,
      });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    goPage() {
      uni.navigateTo({
        url: "/pages/member/recommendedGifts",
      });
    },
    // 跳一田
    goYitian(index) {
      uni.navigateTo({
        url: `/pages/field/index?index=${index}`,
      });
    },
    open() {},
    close() {
      this.show = false;
    },
    click(e) {
      console.log("eeeee", e);
      this.bgColor = e.bgColor;
      this.currentIndex = e.index;
      this.handleList = e.select_buy;
      this.tequanList = e.tequan;
      this.level_name = e.level_name;
      this.level_id = e.level_id;
      this.illustrate_item = e.illustrate;
      this.selectItem = e.select_buy[this.currentIndex1];

      this.jiemuList = e.jiemu;
      this.xingzheList = e.neirong;
      this.buy_explain = e.buy_explain
    },
    handleClick(item, index) {
      console.log("itemitemitme", item);
      this.selectItem = item;
      this.currentIndex1 = index;
    },
    wayClick(text) {
      this.way = text;
    },
    purchase() {
      console.log(
        "rrrrrrrrrrre",
        this.selectItem,
        this.level_id,
        this.level_name
      );
      let detail = JSON.stringify({
        vip_id: this.selectItem.id,
        level_id: this.level_id,
        name: this.level_name,
        file_url: `/static/images/pic_xzzx_xzk_${this.currentIndex}.png`,
      });
      uni.navigateTo({
        url: "/pages/detail/xingzheOrder?detail=" + detail,
      });
    },
    toDetail() {
      console.log(this.user);
      uni.navigateTo({
        url: "/pages/member/growthRecord",
      });
      // if (this.user.level_id > 0) {
      //   uni.navigateTo({
      //     url: "/pages/member/growthRecord",
      //   });
      // } else {
      //   uni.$u.toast("您还不是行者");
      // }
    },
    toTheCharts() {
      uni.navigateTo({
        url: "/pages/member/theCharts",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background: #111111;
  box-sizing: border-box;
}

.zhuangtailan {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #111111;
  z-index: 999;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #111111;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #ff8a4c;
    font-size: 30rpx;
    display: flex;
    flex-direction: row-reverse;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eee;
  }
}

.box {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;

  .box_head {
    width: 100%;
    display: flex;

    .head_left1 {
      width: 108rpx;
      height: 108rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .head_center1 {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 24rpx;
      box-sizing: border-box;
      padding-top: 8rpx;

      .center1_t {
        font-size: 34rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
      }

      .center1_b {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-top: 6rpx;
      }
    }

    .head_right1 {
      width: 138rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #d8d8d8;
      display: flex;
      align-items: center;
    }
  }

  .box_ranking {
    width: 100%;
    height: 200rpx;
    margin: 0;
    margin-top: 48rpx;

    padding: 42rpx;
    box-sizing: border-box;
    .ranking_t {
      font-size: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #634730;
    }

    .ranking_b {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #8a712a;
      margin-top: 24rpx;
    }
  }
  .box_ranking1 {
    background: url("/static/images/pic_xzzx_paihang0.png") no-repeat;
    background-size: 100% 100%;
  }
  .box_ranking2 {
    background: url("/static/images/pic_xzzx_paihang1.png") no-repeat;
    background-size: 100% 100%;
  }
  .box_ranking3 {
    background: url("/static/images/pic_xzzx_paihang2.png") no-repeat;
    background-size: 100% 100%;
  }
  .box_ranking4 {
    background: url("/static/images/pic_xzzx_paihang3.png") no-repeat;
    background-size: 100% 100%;
  }
  .box_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28rpx;
    .box_card_item {
      width: 218rpx;
      height: 120rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      padding: 22rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      color: #303163;
    }
    .box_card_item1 {
      background-image: url("@/static/images/pic_czjl@2x.png");
    }
    .box_card_item2 {
      background-image: url("@/static/images/pic_xzgs@2x.png");
      color: #634730;
    }
    .box_card_item3 {
      background-image: url("@/static/images/pic_yxgw@2x.png");
    }
  }
}

.member_level {
  width: 100%;
  background: #272727;
  margin-top: 40rpx;

  .handle_time {
    width: 100%;
    // display: flex;
    // justify-content: space-between;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
    white-space: nowrap;
    overflow-x: auto;

    .handle_item {
      width: 160rpx;
      height: 194rpx;
      font-size: 28rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      border-radius: 16rpx;
      border: 2rpx solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #eeeeee;
      display: inline-block;
      margin-right: 16rpx;

      .handle_t {
        font-size: 28rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        margin-top: 24rpx;
        text-align: center;
      }

      .handle_b {
        font-size: 32rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .level_0 {
      color: #eee;
      border: 2rpx solid #c9f3bf;
      background: linear-gradient(
        133deg,
        rgba(201, 243, 191, 0.1) 0%,
        rgba(140, 215, 163, 0.1) 100%
      );
    }

    .level_action_0 {
      background: linear-gradient(133deg, #c9f3bf 0%, #8cd7a3 100%);
      color: #30633a;
    }

    .level_1 {
      color: #eee;
      border: 2rpx solid #fbf5dd;
      background: linear-gradient(
        270deg,
        rgba(251, 245, 221, 0.1) 0%,
        rgba(250, 188, 129, 0.1) 100%
      );
    }

    .level_action_1 {
      background: linear-gradient(270deg, #fbf5dd 0%, #fabc81 100%);
      color: #634730;
    }

    .level_2 {
      color: #eee;
      border: 2rpx solid #d7d9f5;
      background: linear-gradient(
        270deg,
        rgba(215, 217, 245, 0.1) 0%,
        rgba(207, 165, 227, 0.1) 100%
      );
    }

    .level_action_2 {
      background: linear-gradient(270deg, #d7d9f5 0%, #cfa5e3 100%);
      color: #442447;
    }

    .level_3 {
      color: #eee;
      border: 2rpx solid #bbe1ff;
      background: linear-gradient(
        270deg,
        rgba(187, 225, 255, 0.1) 0%,
        rgba(126, 198, 255, 0.1) 100%
      );
    }

    .level_action_3 {
      background: linear-gradient(270deg, #bbe1ff 0%, #7ec6ff 100%);
      color: #303163;
    }

    .level_4 {
      color: #eee;
      border: 2rpx solid #d7e3ef;
      background: linear-gradient(
        270deg,
        rgba(215, 227, 239, 0.1) 0%,
        rgba(108, 135, 208, 0.1) 100%
      );
    }

    .level_action_4 {
      background: linear-gradient(270deg, #d7e3ef 0%, #6c87d0 100%);

      color: #303163;
    }
  }

  .handle_text {
    width: 100%;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 42rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 32rpx;
  }

  .privilege {
    width: 100%;
    padding-left: 30rpx;
    box-sizing: border-box;
    margin-top: 56rpx;

    .privilege_title {
      width: 100%;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }

    .privilege_view {
      width: 100%;
      display: flex;
      white-space: nowrap;
      overflow-x: scroll;
      margin-top: 32rpx;

      .privilege_item {
        padding: 0 20rpx;
        width: 144rpx;

        .view_t {
          width: 144rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          // margin-right: 48rpx;

          image {
            width: 88rpx;
            height: 88rpx;
          }
        }

        .view_b {
          text-align: center;
          width: 144rpx;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #eeeeee;
          margin-top: 16rpx;
          // word-wrap:break-word
          white-space: normal;
        }
      }
    }
  }

  .illustrate {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    .illustrate_title {
      width: 100%;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
      margin-top: 56rpx;
    }

    .illustrate_text {
      margin-top: 16rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #adadad;
      line-height: 42rpx;
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }

  .program {
    width: 100%;
    margin-top: 56rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .program_title {
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }

    .program_text {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #adadad;
      margin-top: 16rpx;
    }

    .program_view {
      width: 100%;
      display: flex;
      margin-top: 24rpx;
      overflow: auto;

      .program_item {
        width: 218rpx;
        margin-right: 18rpx;

        .item_t {
          image {
            width: 218rpx;
            height: 222rpx;
          }
        }

        .item_b {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 24rpx;
        }
      }

      .program_item:last-child {
        margin-right: 0;
      }
    }
  }
}

.btn_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  background: #3d3d3d;
  padding: 16rpx 30rpx;
  box-sizing: border-box;

  .btn {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

/deep/ .u-popup__content {
  background: none;
}

.payment {
  width: 100%;
  // height: 1356rpx;
  background: #272727;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  position: relative;
  padding-bottom: 200rpx;

  .payment_head {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 32rpx 0 40rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
    position: relative;

    .payment_colse {
      position: absolute;
      right: 24rpx;
      top: 24rpx;
    }
  }

  .payment_block {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;

    .block_left {
      width: 210rpx;
      height: 210rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .block_right {
      flex: 1;
      padding-left: 32rpx;
      box-sizing: border-box;

      .block_t {
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
        margin-top: 8rpx;
      }

      .block_c {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-top: 16rpx;
      }

      .block_b {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #ee6060;
        margin-top: 22rpx;
      }
    }
  }

  .paymentMethod {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 56rpx;

    .method {
      width: 100%;
      height: 210rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 40rpx 30rpx;
      box-sizing: border-box;

      .method_item {
        width: 100%;
        display: flex;
        align-items: center;

        .method_left {
          width: 46rpx;
          height: 40rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .method_center {
          flex: 1;
          font-size: 30rpx;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          color: #eeeeee;
          padding-left: 20rpx;
        }

        .method_right {
          width: 36rpx;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }

  .payment_illustrate {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 32rpx;

    .illustrate_box {
      width: 100%;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 30rpx;
      box-sizing: border-box;

      .illustrate_title {
        padding: 32rpx 0 16rpx;
        box-sizing: border-box;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
      }

      .illustrate_text1 {
        padding-bottom: 32rpx;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #adadad;
        line-height: 42rpx;
      }
    }
  }

  .payment_btn {
    width: 630rpx;
    height: 96rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    position: absolute;
    left: 60rpx;
    bottom: 64rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>